<template>
  <div>
    <div class="m-content">
      <Card>
        <Form ref="JForm" :model="formData" :rules="rules">
          <FormItem prop="username" label="用户名">
            <Input v-model="formData.username" placeholder="请输入用户名"></Input>
          </FormItem>
          <FormItem prop="name" label="姓名">
            <Input v-model="formData.name" placeholder="请输入姓名"></Input>
          </FormItem>
          <FormItem prop="level" label="用户等级">
            <Select v-model="formData.level" placeholder="请选择用户等级" :clearable="true">
              <Option v-for="item in levelInfo" :key="item.id" :value="item.id">
                {{ item.name }}
              </Option>
            </Select>
          </FormItem>
          <FormItem prop="password" label="密码">
            <Input v-model="formData.password" type="password" placeholder="请输入密码"></Input>
          </FormItem>
          <FormItem prop="againPwd" label="确认密码">
            <Input v-model="formData.againPwd" type="password" placeholder="请输入确认密码"></Input>
          </FormItem>
        </Form>
        <Button type="primary" @click="addUser">增加</Button>
      </Card>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { rules } from './js/rules'
export default {
  data () {
    return {
      formData: {},
      levelInfo: [],
      rules: rules(this)
    }
  },
  mounted () {
    this._getLevelInfo()
  },
  methods: {
    // 添加用户
    addUser () {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._addUser()
          this.formData = {}
        }
      })
    },
    // 获取角色权限等级信息
    async _getLevelInfo () {
      const url = 'levelinfo'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.levelInfo = res.data.levelInfo
        })
      }
    },
    // 添加用户接口
    async _addUser () {
      const url = 'register'
      const res = await this.GET_DATA({
        dataUrl: url,
        actionsUser: this.$store.state.userModule.user.username,
        username: this.formData.username,
        name: this.formData.name,
        level: this.formData.level,
        password: this.$handleEncrypt(this.formData.password),
        againPwd: this.$handleEncrypt(this.formData.againPwd)
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA'
    })
  }
}
</script>

<style lang="scss" scoped>
.m-content {
  margin-left: 15px;
}
</style>